<template>
    <el-input v-model="name" placeholder="请输入" />
    <el-button @click="onSearch">查询搜索</el-button>
    <el-button @click="onAddUser">添加用户</el-button>
    <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="username" label="账号" width="180"></el-table-column>
        <el-table-column prop="nickName" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱" />
        <el-table-column label="添加时间">
            <template #default="scope">
                <div>{{scope.row.createTime?dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss"):"/"}}</div>
            </template>
        </el-table-column>
        <el-table-column label="最后登录">
            <template #default="scope">
                <div>{{scope.row.loginTime?dayjs(scope.row.loginTime).format("YYYY-MM-DD HH:mm:ss"):"/"}}</div>
            </template>
        </el-table-column>
        <el-table-column label="是否启用">
            <template #default="scope">
                <el-switch :value="scope.row.status===1?true:false" />
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="text">分配角色</el-button>
                <el-button type="text" @click="onEdit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination v-model:currentPage="pagination.pageNum" v-model:page-size="pagination.pageSize"
        :page-sizes="[1,5,10,20]" layout="total,sizes, prev, pager, next,jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <Edit :visible="visibleZ" @cancel="onCloseDialog" @confirm="onConfirmDialog" :form="modelForm"></Edit>
</template>
  
<script lang="ts" setup>
import * as api from "@/request/api";
import dayjs from 'dayjs' // ES 2015
import useTable from "@/hooks/useTable"
import { ref, type Ref } from "vue"
import Edit from "@/components/Edit.vue"
import type { IAdminListItem } from "@/request/UmsAdminController/index"
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message-box/style/css'
import { ElMessageBox } from 'element-plus'

let name = ref("")
let { tableData, pagination, handleSizeChange, handleCurrentChange, getTableData } = useTable(api.admin.getAdminList, { keyword: name })

// tableData.value[0].createTime //有类型提示
// 查询搜索
let onSearch = () => {
    getTableData()
}
// 弹窗
let visibleZ = ref(false)
let add = ref(false)  // false 编辑
let modelForm = ref({}) as Ref<IAdminListItem>
// 点击添加按钮
let onAddUser = () => {
    let newUser = {
        email: '',
        nickName: "",
        note: "",
        password: '',
        status: 0,
        username: '',
    } as IAdminListItem;
    add.value = true;
    modelForm.value = newUser;
    visibleZ.value = true;
}
// 点击编辑按钮
let onEdit = (row: IAdminListItem) => {
    add.value = false
    modelForm.value = row
    // console.log(modelForm);
    visibleZ.value = true;
}
let onCloseDialog = () => {
    visibleZ.value = false
}
let onConfirmDialog = (data: IAdminListItem) => {
    visibleZ.value = false
    console.log(data);

    // 二次确认
    ElMessageBox.confirm(
        '是否确认提交？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        if (add.value) {
            await api.admin.adminRegister(data);
        } else {
            await api.admin.adminUpdate(data);
        }

        getTableData();
        ElMessage({
            type: 'success',
            message: '操作成功',
        })
        visibleZ.value = false
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '操作失败',
        })
    })
}
</script>
  